import React, { useEffect } from "react";
import { SwipeAction,Toast } from 'antd-mobile'
import styled from 'styled-components'
import NewsItem from "../components/NewsItem";
import NavBarAgain from "../components/NavBarAgain";
import SkeletonAgain from "../components/SkeletonAgain";
import { connect } from 'react-redux'
import action from '../store/action'
import * as api from '../api/index'

const StoreBox = styled.div`
    .box{
        padding: 25px;
        width: 90%;
        background:white;
    }
`
const Store = function Store(props){
    let {list:storeList,queryStoreListAsync,removeStoreListById} = props
    const handleRemove =async (id)=>{
        try{
            let {code} = await api.storeRemove(id)
            if(+code !== 0){
                Toast.show({
                    icon:'fail',
                    content:'移除失败'
                })
                return;
            }
            Toast.show({
                icon:'success',
                content:'移除成功'
            })
            removeStoreListById(id)
        }catch(e){}
    }
    useEffect(()=>{
        if(!storeList) queryStoreListAsync()
    },[])

    return <StoreBox>
        <NavBarAgain title='我的收藏' />
        {storeList ? <div className="box">
            {storeList.map(item =>{
                let {id,news} = item
                return <SwipeAction key={id} rightActions={[{
                    key:'delete',
                    text:'删除',
                    color:'danger',
                    onClick(){ handleRemove(id) }
                }]}>
                    <NewsItem info={news} />
                </SwipeAction>
            })}
        </div> : <SkeletonAgain />}
        
    </StoreBox>
}
export default connect(state => state.store,action.store)(Store)